<template>
  <el-table
      :data="this.projectList"
      style="width: 100%"
      stripe
      border
      highlight-current-row
      @current-change="handleCurrentChange"
      :style="{ fontSize: '20px' }"

  >
    <el-table-column label="首图">
      <template #default="scope">
        <el-image style="width: 100px; height: 100px" :src="scope.row.headPictureUrl"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="项目名称" width="180" />
    <el-table-column prop="category" label="分类" width="180" />
    <el-table-column prop="price" label="价格" />
    <el-table-column prop="description" label="描述" />
    <el-table-column label="详细">
      <template #default="scope">
        <el-text truncated="flase">
          {{scope.row.descriptionDetail}}
        </el-text>
      </template>
    </el-table-column>

    <el-table-column label="详细图片">
      <template #default="scope">
        <el-image style="width: 100px; height: 100px" :src="scope.row.detailPictureUrl"></el-image>
      </template>
    </el-table-column>
  </el-table>


<!--  编辑模态窗口-->
  <el-dialog
  v-model="visible"
  title="编辑项目信息"
  width="500">


    <el-upload
        ref="upload"
        class="upload-demo"
        action="#"
        :http-request="uploadFile"
        :limit="2"
        list-type="picture"
    >
      <el-button type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          请上传两张 jpg/png 格式的图片
        </div>
      </template>
    </el-upload>

    <el-input v-model="projectUpdate.name"></el-input>
    <el-input v-model="projectUpdate.category"></el-input>
    <el-input v-model="projectUpdate.price"></el-input>
    <el-input v-model="projectUpdate.description"></el-input>
    <el-input v-model="projectUpdate.descriptionDetail" type="textarea" ></el-input>

  <el-button type="primary" @click="handleUpdateAvatar">确定</el-button>
  <el-button @click="cancel">取消</el-button>
  </el-dialog>
<!--  删除模态窗口-->
  <el-dialog
      v-model="deleteVisible"
      width="500"
  >
    <span style="font-size: 22px">确定删除 {{projectUpdate.name}}
</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="deleteVisible = false">取消</el-button>
        <el-button type="danger" @click="deleteProject">
          删除
        </el-button>
      </div>
    </template>
  </el-dialog>


  <el-button-group style="margin: 30px auto">
    <el-button @click="visible = true" type="warning">
      <el-icon> <Edit /> </el-icon>
      编辑
    </el-button>
    <el-button type="primary">
      <router-link to="/projectAdd">
        <el-icon><Plus /></el-icon>
        添加
      </router-link>
    </el-button>
    <el-button @click="deleteVisible = true" type="danger">
      <el-icon><Delete /></el-icon>
      删除
    </el-button>
  </el-button-group>
</template>

<script>
import axios from "axios";
import {ref} from "vue";
import {ArrowLeft} from "@element-plus/icons-vue";
const currentRow = ref()
export default {
  name: "ProjectList",
  computed: {
    ArrowLeft() {
      return ArrowLeft
    }
  },
  data(){
    return{
      projectList:[],
      projectUpdate:{
        id:'',
        category:'',
        name:'',
        price:'',
        description:'',
        descriptionDetail:'',
        fileList:[],
      },
      visible:false,
      deleteVisible:false,
    }
  },
  mounted() {
    this.getProjectList();
  },
  methods:{
    deleteProject(){
      axios.delete('http://localhost:8088/project/delete/'+this.projectUpdate.id,{withCredentials:false})
          .then(res => {
            console.log(res)
          })
    },
    getProjectList(){
      axios.get('http://localhost:8088/project/list',{withCredentials:true})
          .then(res => {
            this.projectList = res.data.data;
          })
    },
    handleCurrentChange(val){
      currentRow.value = val;
      console.log(currentRow.value)
      this.projectUpdate.id = currentRow.value.id;
      this.projectUpdate.name = currentRow.value.name;
      this.projectUpdate.category = currentRow.value.category;
      this.projectUpdate.price = currentRow.value.price;
      this.projectUpdate.description = currentRow.value.description;
      this.projectUpdate.descriptionDetail = currentRow.value.descriptionDetail;
    },
    uploadFile(params){
      this.projectUpdate.fileList.push(params.file)
    },

    handleUpdateAvatar() {
      this.$refs['upload'].submit();
      var forms = new FormData();
      // 我这里需要将更新时间和uid同时传给后端，后端使用对象接收，所以没有设置content-type
      // 如果你只传file，要设置axios中headers的content-type为：multipart/form-data
      forms.append("fileHead", this.projectUpdate.fileList[0]);
      forms.append("fileDetail", this.projectUpdate.fileList[1]);
      forms.append("id",this.projectUpdate.id);
      forms.append("name", this.projectUpdate.name);
      forms.append("category", this.projectUpdate.category);
      forms.append("price", this.projectUpdate.price);
      forms.append("description", this.projectUpdate.description);
      forms.append("descriptionDetail", this.projectUpdate.descriptionDetail);
      axios.post("http://localhost:8088/project/update",forms,{withCredentials:true})
          .then(res => {
            console.log(res)
          }).catch(err => {
        console.log("上传文件时发生错误: " + err);
      })
      this.visible = false;
      this.$refs['upload'].clearFiles();
    },
    cancel() {
      this.visible = false;
      this.$refs['upload'].clearFiles();
    },
  }
}
</script>

<style scoped>

</style>